<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <textarea name="" id="demo" cols="30" rows="10"></textarea>
</body>
<script>
    // 键盘事件
    // onkeydown   键盘按键按下(所有的按键均可触发)
    // onkeyup     键盘按键松开(所有的按键均可触发)
    // onkeypress  键盘按键按下(和文本输入相关的按键均可触发  字母 数字 标点符号 space enter)   => 表单输入

    // 键盘事件的常见绑定方式  
    // 1. 绑定给文档   => 在页面的任何位置按下键盘均可触发
    // 2. 绑定给表单元素 input textarea

    // document.onkeydown = function(event){ // event 事件对象
    //     console.log("keydown",event.key);
    //     // console.log(event);
    // }
    // document.onkeyup = function(event){
    //     console.log("keyup",event.key);
    // }

    // document.onkeypress = function(event){ // event 事件对象
    //     console.log("keypress",event.key);
    //     // console.log(event);
    // }

    // 绑定给表单元素
    var demo = document.getElementById("demo");
    // demo.onkeydown = function(event){ // event 事件对象
    //     console.log("keydown",event.key);
    //     // console.log(event);
    // }
    // demo.onkeyup = function(event){
    //     console.log("keyup",event.key);
    // }

    demo.onkeypress = function(event){ // event 事件对象
        console.log("keypress",event.key);
        // console.log(event);
    }



</script>
</html>